<style lang="scss" scoped>
	.pkeyword {
		padding-top: 20px;	
		.n-page{
			text-align: right;
			margin-top: 20px;
		}
	}
</style>

<template>

	<div class="n-page pkeyword" v-loading="loading">
		<h1 class="n-page-h1">
			<em>{{ $route.meta.title }}</em>
      <el-button icon="el-icon-plus" type="primary" @click="keyWordsConf.props.show = true" v-show="userType==1">关键字搜索</el-button>
			<el-button icon="el-icon-plus" type="primary" @click="showTask">添加任务</el-button>
      <el-button icon="el-icon-search" type="primary" @click="searchConf.props.show = true">查询</el-button>
<!--			<el-button icon="el-icon-plus" type="primary" @click="add">新增</el-button>-->
		</h1>
		
		<div class="pkeyword-main">
			
			<el-table :data="list" row-key="id">
				<el-table-column label="#" type="index" />
				<el-table-column label="评论内容" prop="text"/>
				<el-table-column label="日期" prop="create_time"/>
				<el-table-column label="操作">
					<template #default="{row}">
						<el-popover v-if="row.sec_uid" placement="left" trigger="hover">
							<i slot="reference" class="fa fa-qrcode" style="color:var(--theme-color); margin-right: 5px;"></i>
							<div v-ref="({el})=> el && qrcode(row,el)"></div>
						</el-popover>
						<el-button   type="text" @click="link(row)">链接</el-button>
						<el-button   type="text" style="color:var(--theme-red)" @click="del(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<n-page :params="params" @change="getData()" :conf="{pageKeys:{pageSize:'page_size'}}"  />
			
		
		</div>
		
		<n-handle class="n-page-dialog" :conf="searchConf.props" ref="search" :compList="searchConf.compList" :btns="searchConf.btns"  @ok="getData()"  :form="params"  >
			<template #keyword="{conf}">
				<n-form :item="conf.item" :form="params" />
				<div class="n-page-tags">
					<el-tag v-for="opt in opts.tags" @click="params[conf.k]+= `${ params[conf.k] ? ',' : '' }${opt.value}`">{{opt.label}}</el-tag>
				</div>
			</template>
		</n-handle>

    <n-handle class="n-page-dialog" :conf="searchConf.props" ref="search" :compList="searchConf.compList" :btns="searchConf.btns"  @ok="getData()"  :form="params"  >
			<template #keyword="{conf}">
				<n-form :item="conf.item" :form="params" />
				<div class="n-page-tags">
					<el-tag v-for="opt in opts.tags" @click="params[conf.k]+= `${ params[conf.k] ? ',' : '' }${opt.value}`">{{opt.label}}</el-tag>
				</div>
			</template>
		</n-handle>
		
		
		<n-handle class="n-page-dialog" :conf="keyWordsConf.props" ref="handle" :compList="keyWordsConf.compList" :btns="keyWordsConf.btns"  @ok="keyWordsConfHandle"  :form="keyWordsConf.form" >
			
			<template #keyword="{conf}">
				<n-form :item="conf.item" :form="keyWordsConf.form" />
			</template>
		</n-handle>
		
		<n-handle class="n-page-dialog" :conf="taskConf.props" ref="task" :compList="taskConf.compList" :btns="taskConf.btns"  @ok="handle"  :form="taskConf.form" >
			
			<template #tb>
				<n-search  :params="taskConf.params" :conf="{type:'def'}" :compList="taskConf.searchCompList"  @addTask="addTask"  @analyseTask="analyseTask"    />
				
				<n-tb style="margin-top: 20px; height: 60vh;" :conf="taskConf.tbConf" >
					<template #oper="{row}">
						<el-button type="text" @click="delTask(row)">删除</el-button>
					</template>
				</n-tb>
				
			</template>
		</n-handle>
	
		
		
	</div>
</template>

<script>
	import QRCode from '@/utils/qrcode'
  import store from "@/utils/store";
	export default {
		data() {
			return {
			  userType : 0,
				loading:false,
				opts:{
					tags:[
						{label:'多少钱', value:'多少钱'},
						{label:'价格', value:'价格'},
						{label:'厂家', value:'厂家'},
						{label:'哪里', value:'哪里'},
						{label:'联系', value:'联系'},
					]
				},
				list:[],
				params:{
					date:[],
					text_keywords:'',
					username:(this.$store.userInfo || {}).name,
					start_date:'',
					stop_date:'',
					page:1,
					page_size:10,
					total:0,
				},

        keyWordsConf:{
			    form:{
            keywords:'',
            id : store.userInfo.user_id
          },
					props:{title: '关键字搜索', type:'dialog', size:'400px'},
					compList:[
						{type: 'slot', item:{type:'text',props:{placeholder:'请输入内容', type:'input'}, k: 'keywords'},  slotName: 'keyword', label: '关键字', required:true, k: 'keywords'},
					],
					btns:[
						{ label: '查询', props:{type: 'primary'}, evKey: 'ok' },
					],
				},

				searchConf:{
					props:{title: '选择时间', type:'dialog', size:'400px'},
					compList:[
						{
							type: 'date', label: '时间范围', required:true, k: 'date',
							props:{type:'daterange'},
							on:{change:()=>{
								this.params.date = this.params.date || []
								this.params.start_date = this.params.date[0]
								this.params.stop_date = this.params.date[1]
							}}
						},
						{type: 'slot', item:{type:'text',props:{placeholder:'逗号分隔', type:'textarea',rows:5}, k: 'text_keywords'},  slotName: 'keyword', label: '关键字', required:true, k: 'text_keywords'},
					],
					btns:[
						{ label: '查询', props:{type: 'primary'}, evKey: 'ok' },
					],
				},
				
				
				
				
				handleConf:{
					props:{title: '添加', type:'dialog', size:'600px'},
					form:{},
					_form:{
						title:'',
						a:'',
						b:'',
					},
					compList:[
						{type: 'text', label: '任务名', required:true, k: 'title'},
						{type: 'text', label: '分析源', required:true, k: 'title'},
						{type: 'slot', item:{type:'text',props:{type:'textarea',rows:5}, k: 'a'},  slotName: 'keyword', label: '评论及关键字', required:true, k: 'a'},
						{type: 'slot', item:{type:'text',props:{type:'textarea',rows:5}, k: 'b'}, slotName: 'keyword',  label: '评论屏蔽关键字', required:false, k: 'b'},
					],
					btns:[
						{ label: '确定添加', props:{type: 'primary'}, evKey: 'ok' },
					],
				},
				
				taskConf:{
					tbConf:{
						data:[],
						virtualScrollConf:{hide:0},
						cols:[
							{type: 'index', width:60},
							{label: '地址', prop: 'url', minWidth:300},
							{label: '操作', prop: 'oper', type:'slot', slotName: 'oper',  minWidth:100},
						]
					},
					searchCompList:[
						{type:'text', k:'url'},
						{
							type:'btns', 
							cell:{props:{style:'padding-left:10px'}},
							btns:[
								{label: '添加', props:{type:'primary'}, evKey: 'addTask' },
								{label: '大数据分析按钮', props:{type:'success'}, evKey: 'analyseTask' },
							]
						}
					],
					params:{
						username:(this.$store.userInfo || {}).name,
						url:'',
					},
					props:{title: '任务', type:'dialog', size:'900px'},
					compList:[{type:'slot', slotName:'tb'}],
				},
				
			}
		},
		mounted() {
		  this.userType =  store.userInfo.type
			this.getData();
		},
		methods: {
		  async keyWordsConfHandle(){
        // alert(1)
        const { keyWordsConf:{props,form } } = this;
        const res = await this._req(this.$api.live.keywordsearch(form));
				if(!res) return;
        props.show = false;
        this.$msg('操作成功')

      },
			async del(row){
				const res = await this._req(this.$api.live.delKeyword({id:row.id}));
				if(!res) return;
				this.$msg()
				this.getData();
			},
			async link(row){
				this.$base.dom.copyText(`https://www.douyin.com/user/${row.sec_uid}`)
				this.$msg('复制成功')
			},
			async qrcode(item, el) {
				
				if (item.el === el) return;
				el.innerHTML = '';
				item.el = el;
				new QRCode(el, {
					width: 150,
					correctLevel: 1,
					height: 150,
					text: `https://www.douyin.com/user/${item.sec_uid}`
				})
			},
			
			async getData(){
				if(!this.$refs.search.verif()) return;
				this.searchConf.props.show = false;
				const res = await this._req(this.$api.live.getKeyword(this.params));
				if(!res) return;
				this.list = res.results;
				this.params.total = res.count || 0;
			},
			add(row){
				const {handleConf} = this;
				if(!this.$auth.isLogin()) return this.$msg('请登录',2)
				handleConf.form = {...this.$base.clone(handleConf._form), id:row.id, user_id: this.$store.userInfo.user_id };
				handleConf.props.show = true;
			},
			async handle(opt){
				const { handleConf:{props,form } } = this;
				if(!this.$refs.handle.verif()) return;
				const res = await this._req(this.$api.company.createService(form),props);
				if(!res)return;
				this.$msg();
				this.getData();
				props.show = false;
			},
			async addTask(){
				const { taskConf:{props,params } } = this;
				if(!params.url) return this.$msg('请输入地址',2);
				
				const res = await this._req(this.$api.live.createTask(params),props);
				if(!res) return;
				params.url = '';
				this.$msg()
				this.getTask();
			},
			async getTask(){
				const { taskConf:{tbConf,props,params:{username} } } = this;
				const res = await this._req(this.$api.live.getTask({username}),props);
				if(!res) return;
				tbConf.data = res.data
				tbConf.vm.scrollYConf.minSize = 20;
				
			},
			showTask(){
				if(!this.$auth.isLogin()) return this.$msg('请登录',2)
				this.getTask();
				this.taskConf.props.show = true;
			},
			async delTask(row){
				const { taskConf:{props } } = this;
				const res = await this._req(this.$api.live.delTask({id:row.id, url:row.url}),props);
				if(!res) return;
				this.$msg()
				this.getTask();
			},
			async analyseTask(){
				await this._req(this.$api.live.analyseTask(),this.taskConf.props);
				this.$msg()
			},
			
		}
	}
</script>
